<template>
  <div class="my-container">
    <van-nav-bar
  :title="user? userInfo.nickname:''"
  @click-left="isMyLfet=true"
  @click-right="onClickRight"
>
<template #left>
   <van-icon name="ellipsis" size="20"/>
  </template>
<template #right>
    <van-icon name="search" size="20" />
  </template>
</van-nav-bar>
    <!-- 登录后 -->
    <div v-if="user"
      class="header not-login">
      <div class="no-login-box">
        <img class="img"
          :src="userInfo.avatarUrl"
          alt="">
        <span class="username">{{userInfo.nickname}}</span>
        <div class="fans">
          <div>{{0}} 关注</div>
          <div>{{0}} 粉丝</div>
        </div>
      </div>
    </div>

    <!-- 未登录 -->
    <div v-else
      class="header not-login">
      <div class="no-login-box"
        @click="isLogin=true">
        <img class="img"
          src="../assets/未登录头象.png"
          alt="">
        <div class="log-reg">登录 / 注册 ></div>
      </div>
    </div>
     <div class="main-container">
      <van-cell title="用户编辑" is-link />
        <van-cell title="我的客服" is-link />
          <van-cell title="我的订单" is-link />
     <van-cell title="系统设置" is-link  />
     </div>
    <!-- 登录弹出层 -->
    <van-popup class="login-pop" closeable
      close-icon-position="top-left"
      v-model="isLogin"
      position="bottom"
      :style="{ height: '100%' }">

      <login :isLogin="isLogin"
        @close="isLogin=false"></login>
    </van-popup>

    <!-- 左边弹出层 -->
    <van-popup class="left-pop" v-model="isMyLfet" position="left"
    :isMyLfet="isMyLfet"
    :style="{ height: '100%', width:'70%' }" >

      <MyLeft @close="isMyLfet=false"></MyLeft>
    </van-popup>
  </div>
</template>

<script>
import Login from '@/views/Login.vue'
import MyLeft from '@/views/my/my-left.vue'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      isLogin: false,
      isMyLfet: false, // 左边弹出层
      userInfo: []
    }
  },
  computed: {
    ...mapState(['user'])
  },
  watch: {
    // 监听数据变化
    user: {
      handler (newVal) {
        console.log(newVal)
        this.getUserInfo()
      },
      deep: true
    }
  },
  created () {
    if (window.localStorage.getItem('Token')) {
      this.getUserInfo()
      console.log(this.user)
      this.$forceUpdate()// 强行渲染
    }
  },
  mounted () {

  },
  components: {
    Login,
    MyLeft
  },
  methods: {

    // 点击右边
    onClickRight () {
      this.$router.push('/search')
    },

    // 获取用户详情
    async getUserInfo () {
      try {
        const { data } = await this.$http.get('/user/detail', {
          params: {
            uid: this.user.profile.userId
          }
        })
        console.log(data)
        this.userInfo = data.profile
      } catch (err) {
        return err
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-container{
    position: relative;
    height: 100vh;
    background-color: #dbdbd3;

  // height: 100vh;
  .login-pop{
     background-color: rgb(233, 231, 229);;
  }
  .van-nav-bar{
     background-color: #b8b7b2;

    .van-icon{
      color: #fff;
    }
  }

  .not-login{
    height: 100px;
    position: absolute;
    top:110px;
    left: 10px;
    right: 10px;
    background-color:rgb(202, 202, 199);
    border-radius: 30px;

    display: flex;
    justify-content: center;
    align-items: center;

    .no-login-box{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -30px;
    .login-pop{
      padding: 0 3px;
      font-size: 20px;
      color: #ccc;
      text-align: center;
    }
      .img{
      width: 100px;
      height: 100px;
      background-color: rgb(236, 169, 169);
      border-radius: 50%;
    }
      .username{
         padding-top: 10px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      }
    /deep/   .fans {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #fff;
       div{
         margin: 0 10px;
       }
      }

    }
  }
  .left-pop{
    background-color:#a7a3a1fb;
  }

   // main
  .main-container{
    position: absolute;

    border-radius: 30px;
    top: 230px;
    left: 10px;
    right: 10px;

    .van-cell{
    background-color: #cacac7;
    }

  }
}
</style>
